import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {InfoCircleOutlined} from "@ant-design/icons";
import { Input, Modal, InputNumber, Upload, Button, Icon, Select, Radio, Card, Col, Checkbox,message,Tooltip,Row} from 'antd';
import { formatMessage,FormattedMessage } from 'umi-plugin-react/locale';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, { useState } from 'react';
import { queryRule, updateRule, addRule, removeRule } from '../service';
import styles from '../style.less';

import CryptoJS from 'crypto-js'

// 导入自定义组件1
import PreviewForm from '@/components/PreviewForm';
import * as BdHelper from '@/utils/BdHelper';
import * as DataHelper from '@/helpers/DataHelper';
import * as TsxHelper from '@/helpers/TsxHelper';

// 常量
const { TextArea } = Input;
const FormItem = Form.Item;
const Option = Select;

// 定义: 数据表单属性
interface DataFormProps extends FormComponentProps {
  // dataModalVisible: boolean;
  isUpdate: boolean
  dataFormValues: any
  common: any
}

// 数据表单
const DataForm: React.FC<DataFormProps> = props => {
  // 组件属性
  const { form, common, isUpdate, dataFormValues } = props;

  const parseData = (key:any,options:any) => {
    // console.log(options);
    var name:any = "";
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          name = item?.item_value;
        }
      })
    }
    return name
  }

  // 图片状态
  const [picture, setPicture] = useState<any[]>([]);
  const [pictureAnonymous,setPictureAnonymous] = useState<any[]>([]);
  const [pictureDeactivate,setPictureDeactivate] = useState<any[]>([]);
  const [uploadChanged, setUploadChanged] = useState<boolean>(false);
  const [uploadAnonymousChanged, setUploadAnonymousChanged] = useState<boolean>(false);
  const [uploadDeactivateChanged, setUploadDeactivateChanged] = useState<boolean>(false);
  const [previewModelVisible, handlePreviewModalVisible] = useState<boolean>(false);
  const [previewImg, setPreviewImg] = useState('');
  const [defaultUrl, setDefaultUrl] = useState(parseData("default_avatar",dataFormValues));
  const [anonymousUrl, setAnonymousUrl] = useState(parseData("anonymous_avatar",dataFormValues));
  const [deactivateUrl, setDeactivateUrl] = useState(parseData("deactivate_avatar",dataFormValues));

    //提交表单
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        console.log(defaultUrl,anonymousUrl,deactivateUrl);
        console.log("submit fields ", fieldsValue)
        var submitValue = [
            {
              //请求当前一组配置参数，tag=users
              "alias_key": 'users',
              "item_type":'system',
              "dict_item_arr": [
                {
                  "alias_key": "account_connect_services",
                  "item_value": fieldsValue.account_connect_services,
                  'item_type':"select",
                },
                {
                  "alias_key":"account_prove_service",
                  "item_value": fieldsValue.account_prove_service,
                  'item_type':"select",
                },
                {
                  "alias_key": "member_multiple",
                  "item_value": fieldsValue.member_multiple,
                  'item_type':"radio",
                },
                {
                  "alias_key": "multi_member_service",
                  "item_value": fieldsValue.multi_member_service,
                  'item_type':"select",
                },
                {
                  "alias_key": "multi_member_roles",
                  "item_value": fieldsValue.multi_member_roles,
                  'item_type':"select",
                },
                {
                  "alias_key": "mname_min",
                  "item_value": fieldsValue.mname_min,
                  'item_type':"number",
                },
                {
                  "alias_key": "mname_max",
                  "item_value": fieldsValue.mname_max,
                  'item_type':"number",
                },
                {
                  "alias_key": "default_role",
                  "item_value": fieldsValue.default_role,
                  'item_type':"select",
                },
                {
                  "alias_key": "default_avatar",
                  // "item_value": defaultUrl,
                  "item_value": picture.length>0?picture[0].file_id:parseData('default_avatar',dataFormValues),
                  'item_type':"file",
                },
                {
                  "alias_key": "anonymous_avatar",
                  // "item_value": anonymousUrl,
                  "item_value": pictureAnonymous.length>0?pictureAnonymous[0].file_id:parseData('anonymous_avatar',dataFormValues),
                  'item_type':"file",
                },
                {
                  "alias_key": "deactivate_avatar",
                  // "item_value": deactivateUrl,
                  "item_value": pictureDeactivate.length>0?pictureDeactivate[0].file_id:parseData('anonymous_avatar',dataFormValues),
                  'item_type':"file",
                },
                {
                  "alias_key": "password_length",
                  "item_value": fieldsValue.password_length,
                  'item_type':"number",
                },
                {
                  "alias_key": "password_strength",
                  "item_value": fieldsValue.password_strength,
                  'item_type':"checkbox",
                },
                // {
                //   "alias_key": "interdiction_role",
                //   "item_value": fieldsValue.interdiction_role,
                //   'item_type':"select",
                // },
                {
                  "alias_key": "mname_edit",
                  "item_value": fieldsValue.mname_edit,
                  'item_type':"number",
                },
                {
                  "alias_key": "nickname_edit",
                  "item_value": fieldsValue.nickname_edit,
                  'item_type':"number",
                },
                
              ]
            }
        ]
        // 如果更新成功之后，重置表单
        updateRule({config_json: JSON.stringify(submitValue)}).then((res:any) => {
          console.log('handleSubmit then success is ', JSON.stringify(submitValue))
          if(res.code == 0){
            // form.resetFields()
            // setPicture([]);
            message.success('保存成功');
          }
        })
  
      });
    };

  // 设置上传文件值
  const setUploadFile = (fileList:any) => {
    if(fileList.length>0 && fileList[0].response && fileList[0].response?.code != 0){
      message.error(fileList[0].response.message);
      return
    }
    setUploadChanged(true)
    
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPicture(fileArr)
      setPreviewImg(fileArr[0].file_url)
      setDefaultUrl(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('set picture []')
      // setPicture([])
    }
  }

  // 设置匿名上传文件值
  const setAnonymousUploadFile = (fileList:any) => {
    if(fileList.length>0 && fileList[0].response && fileList[0].response?.code != 0){
      message.error(fileList[0].response.message);
      return
    }
    setUploadAnonymousChanged(true)
    
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPictureAnonymous(fileArr)
      setPreviewImg(fileArr[0].file_url)
      setAnonymousUrl(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('setPictureAnonymous []')
      // setPictureAnonymous([])
    }
  }

  // 设置停用用户上传文件值
  const setDeactivateUploadFile = (fileList:any) => {
    if(fileList.length>0 && fileList[0].response && fileList[0].response?.code != 0){
      message.error(fileList[0].response.message);
      return
    }
    setUploadDeactivateChanged(true)
    
    let fileArr = DataHelper.getLastUploadFile(fileList)
    console.log("fileArr is ", fileArr)
    if(fileArr.length > 0){
      setPictureDeactivate(fileArr)
      setPreviewImg(fileArr[0].file_url)
      setDeactivateUrl(fileArr[0].file_url)
    }else if(fileArr.length === 0){
      console.log('setPictureDeactivate []')
      // setPictureDeactivate([])
    }
  }

  const parseDataItem = (key:any,options:any) => {
    // console.log(options);
    var obj:any = {};
    if(Array.isArray(options) && options.length>0){
      options.map(item=>{
        if(item.alias_key == key){
          obj = item;
        }
      })
    }
    return obj
  }


    
  // 初始化变量
  const token = BdHelper.getBdToken()

  // 编辑时初始化 picture
  const defaultPicture = DataHelper.buildFileByUrl(parseDataItem('default_avatar',dataFormValues)?.item_file);
  const defaultAnonymousPicture = DataHelper.buildFileByUrl(parseDataItem("anonymous_avatar",dataFormValues)?.item_file);
  const defaultDeactivatePicture = DataHelper.buildFileByUrl(parseDataItem("deactivate_avatar",dataFormValues)?.item_file);
  console.log(picture)
  console.log(pictureAnonymous)
  console.log(pictureDeactivate)
  // 是否展示图片上传按钮
  const showUploadButton = DataHelper.showUploadBtn(isUpdate, picture, defaultPicture, uploadChanged)
  const showAnonymousUploadButton = DataHelper.showUploadBtn(isUpdate, pictureAnonymous, defaultAnonymousPicture, uploadAnonymousChanged)
  const showDeactivateUploadButton = DataHelper.showUploadBtn(isUpdate, pictureDeactivate, defaultDeactivatePicture, uploadDeactivateChanged)

  const userInfo = localStorage.getItem('user-login-info');
  let fresnsClient = eval("(" + userInfo + ")");
  const timestamp = new Date().getTime().toString().substr(0,10);
  var md5String = `appId=${fresnsClient?.app_id}&platform=${fresnsClient?.platform}&timestamp=${timestamp}&key=${fresnsClient?.app_secret}`;

  // 弹出框
  // @ts-ignore
  return <Card>
    {/* <Row>
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}label={
        <span>
          <FormattedMessage id="第三方互联支持" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="安装互动插件后“多选”关联，可实现快捷注册或登录。" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
        } style={{marginBottom: 15}}>
          {form.getFieldDecorator('account_connect_services', {
            initialValue: parseData('account_connect_services',dataFormValues)?.split(','),
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<Select mode="multiple" placeholder={''} size={'default'} style={{ width: '100%' }}>
          {common?.manyUsersOption  && TsxHelper.buildSelectOption(common?.manyUsersOption)}
          </Select>)}
        </FormItem>
      </Col>
    </Row> */}
    <Row>
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}label={
        <span>
          <FormattedMessage id="实名认证支持" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id=" 安装认证服务插件后，用户可以实名制认证。" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
        } style={{marginBottom: 15}}>
          {form.getFieldDecorator('account_prove_service', {
            initialValue: parseData('account_prove_service',dataFormValues),
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<Select placeholder={''} size={'default'} style={{ width: '100%' }}>
          {common?.proveOption  && TsxHelper.buildSelectOption(common?.proveOption)}
          </Select>)}
        </FormItem>
      </Col>
    </Row>
    <Row>
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="多用户模式" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="设置是否启用多用户模式，多用户管理功能需安装相应的插件。" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      } >
        {form.getFieldDecorator('member_multiple', {
          initialValue: parseData('member_multiple',dataFormValues) || false,
        })(<Radio.Group buttonStyle="solid" defaultValue={false}>
          <Radio value={false}>关闭</Radio>
          <Radio value={true}>开放</Radio>
      </Radio.Group>)}
      </FormItem>
    </Col>
    </Row>
    {
      form.getFieldValue('member_multiple') == true && 
      <Row style={{marginBottom: 20}}>
        <Col span={24} style={{display: 'flex', justifyContent: 'center',marginLeft: '2.17%'}}>
          <Card title="多用户模式配置" type="inner"  style={{width: "62.5%"}}>
            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="多用户功能插件" />
                {/* <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="加入通道由哪个插件提供支持" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em> */}
              </span>
            }
             >
              {form.getFieldDecorator('multi_member_service', {
                initialValue: parseData('multi_member_service',dataFormValues),
                //  rules: [{ required: true, message: '请选择！',}],
              })(<Select placeholder={'由哪个插件负责多用户功能'} size={'default'} style={{ width: '100%' }}>
                {common?.manyUsersOption  && TsxHelper.buildSelectOption(common?.manyUsersOption)}
              </Select>)}
            </FormItem>
            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} style={{marginBottom: 15}}
            label={
              <span>
                <FormattedMessage id="有权使用的角色" />
                {/* <em className={styles.optional}>
                  <Tooltip title={<FormattedMessage id="到期时间记录在用户资料里，不受插件影响，可自由更换插件" />}>
                    <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
                  </Tooltip>
                </em> */}
              </span>
            }>
              {form.getFieldDecorator('multi_member_roles', {
                initialValue: parseData('multi_member_roles',dataFormValues) != '' ? JSON.parse(parseData('multi_member_roles',dataFormValues)) : [],
                //  rules: [{ required: true, message: '请选择！',}],
              })(<Select mode="multiple" placeholder={'哪些角色有权创建多用户，可以多选，留空代表所有人都有权'} size={'default'} style={{ width: '100%' }}>
                {common?.memberRoleOption  && TsxHelper.buildSelectOption(common?.memberRoleOption)}
              </Select>)}
            </FormItem>
          </Card>
        </Col>
      </Row>
    }

    <Row>
      <Col span={24}>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
        label={
          <span>
            <FormattedMessage id="默认用户角色" />
            <em className={styles.optional}>
              <Tooltip title={<FormattedMessage id="用户加入时默认用户角色" />}>
                <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
              </Tooltip>
            </em>
          </span>
        }
        >
          {form.getFieldDecorator('default_role', {
            initialValue: parseData('default_role',dataFormValues),
            // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
          })(<Select placeholder={'用户加入时默认用户角色'} size={'default'} style={{ width: '100%' }}>
          {/* <Option value="管理员">管理员</Option>
          <Option value="禁言用户">禁言用户</Option>
          <Option value="普通用户">普通用户</Option> */}
          {common?.memberRoleOption  && TsxHelper.buildSelectOption(common?.memberRoleOption)}
          </Select>)}
        </FormItem>
      </Col>
    </Row>
    <Row justify="start">
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="默认用户头像" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="用户未设置头像时的默认头像图" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      } >
        {form.getFieldDecorator('default_avatar', {
          // initialValue: defaultPicture,
          // rules: [{required: true, message: '请上传图片'}],
        })(
          <Upload
            listType={'picture'}
            className={'upload-list-inline'}
            action="/api/admin/tweetfiles/upload"
            defaultFileList={defaultPicture}
            beforeUpload={(file) => {
              console.log('before upload file type:', file.type)
              // todo: 这里可以对上传文件类型做限制
              return true;
            }}
            data={{ table_type: 2, table_key: 'default_avatar' }}
            onRemove={() => {setPicture([]);setDefaultUrl('')}}
            onChange={(changeObj) => setUploadFile(changeObj.fileList)}
            onPreview={() => {setPreviewImg(picture.length > 0 ? picture[0].file_url : parseDataItem('default_avatar',dataFormValues)?.item_file) ;handlePreviewModalVisible(true);}}
            headers={{
              Authorization: `Bearer ${token}`,
              'platform': fresnsClient?.platform,
              'timestamp': timestamp,
              'appId': fresnsClient?.app_id,
              'sign':  CryptoJS.MD5(md5String).toString(),
            }}
          >
            {
              showUploadButton ? (
                <Button>
                  <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                </Button>
              ) : null
            }
          </Upload>
        )}
      </FormItem>
    </Col>
    </Row>
    <Row justify="start">
    
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="匿名用户头像" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="内容发表匿名者的头像图" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      } >
        {form.getFieldDecorator('anonymous_avatar', {
          // initialValue: defaultAnonymousPicture,
          // rules: [{required: true, message: '请上传图片'}],
        })(
          <Upload
            listType={'picture'}
            className={'upload-list-inline'}
            action="/api/admin/tweetfiles/upload"
            defaultFileList={defaultAnonymousPicture}
            beforeUpload={(file) => {
              console.log('before upload file type:', file.type)
              // todo: 这里可以对上传文件类型做限制
              return true;
            }}
            data={{ table_type: 2 , table_key: 'anonymous_avatar' }}
            onRemove={() => {setPictureAnonymous([]);setAnonymousUrl('')}}
            onChange={(changeObj) => setAnonymousUploadFile(changeObj.fileList)}
            onPreview={() => {setPreviewImg(pictureAnonymous.length > 0 ? pictureAnonymous[0].file_url : parseDataItem("anonymous_avatar",dataFormValues)?.item_file);handlePreviewModalVisible(true);}}
            headers={{
              Authorization: `Bearer ${token}`,
              'platform': fresnsClient?.platform,
              'timestamp': timestamp,
              'appId': fresnsClient?.app_id,
              'sign':  CryptoJS.MD5(md5String).toString(),
            }}
          >
            {
              showAnonymousUploadButton ? (
                <Button>
                  <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                </Button>
              ) : null
            }
          </Upload>
        )}
      </FormItem>
    </Col>
    </Row>
    {/* {(parseData("delete_account",dataFormValues) == '2' || parseData("delete_account",dataFormValues) == '3') && */}
    <Row justify="start">
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
      label={
        <span>
          <FormattedMessage id="已停用用户头像" />
          <em className={styles.optional}>
            <Tooltip title={<FormattedMessage id="用户注销删除后的头像图" />}>
              <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
            </Tooltip>
          </em>
        </span>
      }>
        {form.getFieldDecorator('deactivate_avatar', {
          // initialValue: defaultDeactivatePicture,
          // rules: [{required: true, message: '请上传图片'}],
        })(
          <Upload
            listType={'picture'}
            className={'upload-list-inline'}
            action="/api/admin/tweetfiles/upload"
            defaultFileList={defaultDeactivatePicture}
            beforeUpload={(file) => {
              console.log('before upload file type:', file.type)
              // todo: 这里可以对上传文件类型做限制
              return true;
            }}
            data={{ table_type: 2 , table_key: 'deactivate_avatar' }}
            onRemove={() => {setPictureDeactivate([]);setDeactivateUrl('')}}
            onChange={(changeObj) => setDeactivateUploadFile(changeObj.fileList)}
            onPreview={() => {setPreviewImg(pictureDeactivate.length > 0 ? pictureDeactivate[0].file_url : parseDataItem("deactivate_avatar",dataFormValues)?.item_file);handlePreviewModalVisible(true);}}
            headers={{
              Authorization: `Bearer ${token}`,
              'platform': fresnsClient?.platform,
              'timestamp': timestamp,
              'appId': fresnsClient?.app_id,
              'sign':  CryptoJS.MD5(md5String).toString(),
            }}
          >
            {
              showDeactivateUploadButton ? (
                <Button>
                  <Icon type="upload"/> {formatMessage({ id: 'app.base.upload' })}
                </Button>
              ) : null
            }
          </Upload>
        )}
      </FormItem>
    </Col>
    </Row>
    {/* } */}
    
    {/* <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'禁言用户角色'} style={{marginBottom: 15}}>
        {form.getFieldDecorator('interdiction_role', {
          initialValue: parseData('interdiction_role',dataFormValues),
        })(<Select placeholder={'对用户操作禁言时，用户将进入哪个用户角色'} size={'default'} style={{ width: '100%' }}>
        {common?.memberRoleOption  && TsxHelper.buildSelectOption(common?.memberRoleOption)}
        </Select>)}
      </FormItem>
    </Col> */}
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={
          <span>
            <FormattedMessage id="Password length requirement" />
            <em className={styles.optional}>
              <Tooltip title={<FormattedMessage id="密码最小长度，0 或不填为不限制" />}>
                <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
              </Tooltip>
            </em>
          </span>
        } style={{marginBottom: 15}}>
        {form.getFieldDecorator('password_length', {
          initialValue: parseData('password_length',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber placeholder={''} style={{width:'100%'}}/>)}
      </FormItem>
    </Col>
    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} style={{marginBottom: 15}}
        label={
          <span>
            <FormattedMessage id="Cipher strength requirement" />
            <em className={styles.optional}>
              <Tooltip title={<FormattedMessage id="账号设置密码中必须存在所选字符类型，不选则为无限制" />}>
                <InfoCircleOutlined style={{ marginRight: 4,marginLeft: 4 }} />
              </Tooltip>
            </em>
          </span>
        }>
        {form.getFieldDecorator('password_strength', {
          initialValue: parseData('password_strength',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<Checkbox.Group  onChange={(list)=>{console.log(list)}}>
          <Checkbox value={1}>数字</Checkbox>
          <Checkbox value={2}>小写字母</Checkbox>
          <Checkbox value={3}>大写字母</Checkbox>
          <Checkbox value={4}>特殊字符（除空格）</Checkbox>
        </Checkbox.Group>)}
      </FormItem>
    </Col>

    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'用户名最小长度'} style={{marginBottom: 15}}>
        {form.getFieldDecorator('mname_min', {
          initialValue: parseData('mname_min',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber style={{width:'100%'}} />)}
      </FormItem>
    </Col>

    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'用户名最大长度'} style={{marginBottom: 15}}>
        {form.getFieldDecorator('mname_max', {
          initialValue: parseData('mname_max',dataFormValues),
          // rules: [{ required: true, message: formatMessage({ id: 'app.base.please_input_min_1' }) , min: 1 }],
        })(<InputNumber style={{width:'100%'}} />)}
      </FormItem>
    </Col>

    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'用户名修改间隔天数'} style={{marginBottom: 15}}>
        {form.getFieldDecorator('mname_edit', {
          initialValue: parseData('mname_edit',dataFormValues),
          rules: [{ pattern: /^[0-9]*$/, message: '请输入合理的天数' }],
        })(<Input addonAfter="天" placeholder="用户名每隔多少天才能修改，0 天代表不限时间，随时可修改" style={{width:'100%'}} />)}
      </FormItem>
    </Col>

    <Col span={24}>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label={'用户昵称修改间隔天数'} style={{marginBottom: 15}}>
        {form.getFieldDecorator('nickname_edit', {
          initialValue: parseData('nickname_edit',dataFormValues),
          rules: [{ pattern: /^[0-9]*$/, message: '请输入合理的天数' }],
        })(<Input addonAfter="天" placeholder="用户昵称每隔多少天才能修改，0 天代表不限时间，随时可修改。" style={{width:'100%'}} />)}
      </FormItem>
    </Col>
    
    <Col span={24}>
      <div style={{display: 'flex',justifyContent:'center',marginTop:20,}}>
        <Button type="primary" style={{marginLeft:30}} onClick={()=>{okHandle()}}>保存</Button>
      </div>
    </Col>
    {
      previewModelVisible && (
        <PreviewForm
          previewModelVisible={previewModelVisible}
          onVisibleModel={handlePreviewModalVisible}
          previewImg={previewImg}
        />
      )
    }
  </Card>;
};

export default Form.create<DataFormProps>()(DataForm);
